<template>
  <MarkdownRenderer :markdown="article" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import MarkdownRenderer from '../components/MarkdownRenderer.vue';

const article = ref('')
onMounted(() => {
  article.value = `# 在Webpack中为前端页面注入版本信息

在Webpack打包时为前端页面注入版本信息有多种方法，以下是几种常用的实现方式：

## 1. 使用DefinePlugin注入全局变量

\`\`\`javascript
const webpack = require('webpack');
const packageJson = require('./package.json');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.VERSION': JSON.stringify(packageJson.version),
      'process.env.BUILD_DATE': JSON.stringify(new Date().toISOString())
    })
  ]
};
\`\`\`

然后在代码中可以直接使用：
\`\`\`javascript
console.log(\`App version: \${process.env.VERSION}, built at: \${process.env.BUILD_DATE}\`);
\`\`\`

## 2. 使用HtmlWebpackPlugin注入到HTML

\`\`\`javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
const packageJson = require('./package.json');

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      version: packageJson.version,
      buildDate: new Date().toISOString(),
      // 在模板中可以使用<%= htmlWebpackPlugin.options.version %>
    })
  ]
};
\`\`\`

在HTML模板中：
\`\`\`html
<meta name="version" content="<%= htmlWebpackPlugin.options.version %>">
\`\`\`

## 3. 生成版本信息文件

\`\`\`javascript
const fs = require('fs');
const packageJson = require('./package.json');

fs.writeFileSync(
  './public/version.json',
  JSON.stringify({
    version: packageJson.version,
    buildTime: new Date().toISOString()
  })
);
\`\`\`

然后在应用中加载这个JSON文件。

## 4. 使用BannerPlugin添加版本信息到文件头部

\`\`\`javascript
const webpack = require('webpack');
const packageJson = require('./package.json');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.BannerPlugin({
      banner: \`Version: \${packageJson.version}\nBuild Date: \${new Date().toISOString()}\`,
      entryOnly: true
    })
  ]
};
\`\`\`

## 5. 自定义插件注入版本信息

\`\`\`javascript
class VersionInfoPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('VersionInfoPlugin', (compilation) => {
      const content = \`export const version = '\${require('./package.json').version}';\n\`;
      compilation.assets['version.js'] = {
        source: () => content,
        size: () => content.length
      };
    });
  }
}

module.exports = {
  // ...其他配置
  plugins: [new VersionInfoPlugin()]
};
\`\`\`

## 6. 使用环境变量

在package.json中：
\`\`\`json
"scripts": {
  "build": "webpack --env.VERSION=$(node -p \"require('./package.json').version\")"
}
\`\`\`

在webpack.config.js中：
\`\`\`javascript
module.exports = (env) => ({
  plugins: [
    new webpack.DefinePlugin({
      'process.env.VERSION': JSON.stringify(env.VERSION)
    })
  ]
});
\`\`\`

选择哪种方法取决于你的具体需求，如果需要在运行时访问版本信息，推荐使用DefinePlugin或生成版本文件的方式；如果只需要在构建时记录版本，可以使用BannerPlugin。`
})
</script>
